<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Zones throttle</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="../dist/zone.js"></script>
  <script src="../dist/long-stack-trace-zone.js"></script>
</head>
<body>
  <h1>Throttle Example</h1>

  <button id="b2">Error</button>

  <script>
  /*
   * In this example, we have a button that makes some request
   * to our server. We want to only make the request once per
   * 1s, so we use a `throttle` helper. If the request fails,
   * it's difficult to see where the failure originated from.
   *
   * Thankfully, we can use zones to preserve the stack even
   * across async tasks to get a better picture of the control
   * flow of the app.
   */

  var throttleMakeRequest;

  /*
   * Start the app
   * Bind listeners
   */
  function bootstrap () {
    b2.addEventListener('click', throttleMakeRequest);
  }

  /*
   * Makes a request to the server
   * Will only make the request once every 1000ms
   */
  throttleMakeRequest = throttle(function () {
    makeRequestToServer(handleServerResponse);
  }, 1000);


  /*
   * Pretend this makes a request to a server
   */
  function makeRequestToServer (cb) {
    setTimeout(cb, 100);
  }


  function handleServerResponse (err, data) {
    throw new Error('Oops');
  }


  /*
   * Returns a fn that can only be called once
   * per `time` milliseconds
   */
  function throttle (fn, time) {
    var id = null;
    if (typeof time !== 'number') {
      time = 0;
    }
    return function () {
      if (!id) {
        id = setTimeout(function () {
          id = null;
          fn();
        }, time);
      }
    };
  }

  /*
   * Start the application
   *
   * If we start the application with `zone.run`, we
   * get long stack traces in the console!
   */

  //bootstrap();
  Zone.current.fork(Zone.longStackTraceZoneSpec).run(bootstrap);

  </script>

</body>
</html>
